import { Component } from "react";

class Header extends Component {
    addTodo(e) {
        if (e.code == "Enter") {
            console.log(e);
            if (e.target.value.trim()) {
                const { todoList, add } = this.props
                let id = todoList.length ? todoList[todoList.length - 1].id + 1 : 1
                let obj = {
                    id,
                    title: e.target.value,
                    done: false,
                    isEdit: false
                }
                console.log(obj);
                add(obj)
                e.target.value = ''
            }else{
                alert("输入内容不能为空！")
            }
        }
    }
    render() {
        const { todoList, add } = this.props
        console.log(todoList);
        return (
            <header className="header">
                <h1>todos</h1>
                <input className="new-todo" placeholder="What needs to be done?" autoFocus onKeyUp={(e) => this.addTodo(e)} />
            </header>
        )
    }
}

export default Header